<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>名创优品官方商城</title>
		<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
		<link rel="stylesheet" type="text/css" href="css/reg.css"/>
	</head>
	<body>
		<!-- 头部 -->
			<div class="header">
				
			</div>
		
		<div class="x-fll">
			<div class="x-signIn">
				<div class="imgBoard"><img src="./img/注册/1.jpg"></div>
				<div class="signInBoard">
					<p>账号注册</p>
						<div class="x-pb12">
							<input type="text" name="username" id="username" maxlength="11" placeholder="请输入常用手机号码(11位)" />
						</div>
						<div class="x-input x-obtain x-pb12">
							<input name="" type="text" placeholder="请输入手机验证码">
							<button class="x-redBtn" id="send-vcode">获取验证码</button>
						</div>
						<input type="password" name="userpass" id="userpass" value=""
							placeholder="设置密码 ( 6-16 位数字和字母)" />
						<div class="h85">
							<div id="err-phone"></div>
							<div id="err-pass"></div>
							<div id="err-result"></div>
							
						</div>
						<div class="agree">
							<div class="x-checkboxC" id="Hit">
								<span>阅读并同意</span>
								<a href="#" class="x-blue">《名创优品用户服务协议》</a>
								<a href="#" class="x-blue">《平台隐私政策》</a>
							</div>
						</div>
						<button type="button" class="loginBtn x-redBtn" id="submit-btn">立即注册</button>
				</div>
			</div>
		</div>
	
	<!-- 底部 -->
			<div class="tail1"></div>
	<!-- 尾部 -->
			<div class="tail2"></div>
	</body>
</html>
<script type="text/javascript"src="js/jQuery.js"></script>
<script type="text/javascript" src="js/registered.js"></script>
<script type="text/javascript">
	// 引入头部
	$(".header").load("header.html", function() {});
	// 引入尾部
	$(".tail1").load("tail1.html", function() {});
	$(".tail2").load("tail2.html", function() {});
	
	$(".x-left").click(function(){
		$(this).css({border:"0.5px solid #999"})
	})
	$(".x-left").blur(function(){
		$(this).css({border:"1px solid #ddd"})
	})
	
	
	
	//注册用户
	let flag = false;
	$("#username").blur(function(){
		let  reg = /^\d{11}$/;
		if(!reg.test(this.value)){
			$("#err-phone").html("请输入正确手机号");
			flag = false;
		}else{
			$("#err-phone").html("手机号输入正确");
			flag = true;
		}
	})
	
	$("#userpass").blur(function(){
		let  reg = 	/^\w{6,16}$/;
		if(!reg.test(this.value)){
			$("#err-pass").html("请输入正确密码");
			flag = false;
		}else{
			$("#err-pass").html("密码输入正确");
			flag = true;
		}
	})
	
	
	$("#submit-btn").click(function(){
		
		if(flag){
			$.ajax({
				type:"POST",
				url:"verify.php",
				data:"phone="+$("#username").val(),
				success:(msg)=>{
					
					if(!msg){
						$.ajax({
							type:"POST",
							url:"reg.php",
							data:"phone="+$("#username").val()+"&password="+$("#userpass").val(),
							success:(msg)=>{
								if(msg){
									$("#err-result").html("注册成功，请点击登录<a href='login.html'>登录</a>");
								}
							}
						})
					}else{
						$("#err-result").html("该用户已存在");
					}
				}
			})
		}
	})
	
		
</script>